<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>promise练习</title>
    <style>
        img{
            width: 100px;
            height:100px;
        }
    </style>
</head>
<body>
<div id="imgList">
    <!--<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=518705001,2876224431&fm=11&gp=0.jpg" alt="">
    <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=153960715,2502274764&fm=26&gp=0.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1474266791,210202337&fm=26&gp=0.jpg" alt="">-->
    <!--<img id="img1"  src="favicon.ico" alt="">-->
</div>
<script>
    let imgDiv = document.getElementById("imgList");
    console.log(imgDiv.style);
    imgDiv.style.height = "1000px";
    imgDiv.onload = function () {
        console.log("div onload")
    }
    console.dir(imgDiv);



    // all race
    // 需求 加载三张图片 如果图片都加载完成后 再显示到界面中

    //加载图片函数
    let loadImg = (src)=>{
        return new Promise((resolve, reject)=>{
            //创建一个图片标签
            let img = document.createElement("img");
            img.src = src;
            img.onload = ()=>{//加载成功后的回调函数
                resolve(img)
            };
            img.onerror = ()=>{//加载失败后的回调函数
                reject(new Error("图片加载失败"))
            };
        });
    };

    /*let p1 = new Promise((resolve, reject)=>{
        //创建一个图片标签
        let img = document.createElement("img");
        img.src = "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=518705001,2876224431&fm=11&gp=0.jpg";
        img.onload = ()=>{//加载成功后的回调函数
            resolve(img)
        };
        img.onerror = ()=>{//加载失败后的回调函数
            reject(new Error("图片加载失败"))
        };
    });*/
    let p1 = loadImg("https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=518705001,2876224431&fm=11&gp=0.jpg");
    let p2 = loadImg("https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=153960715,2502274764&fm=26&gp=0.jpg");
    let p3 = loadImg("https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1474266791,210202337&fm=26&gp=0.jpg");

    //返回的也是一个promise对象
    let pAll = Promise.all([p1,p2,p3]);

    pAll.then(
        success=>{
            console.log("pAll.then.success====>",success);//数组: [img1,img2,img3]
            let imgDiv = document.getElementById("imgList");
            success.map((item)=>{
                imgDiv.appendChild(item)
            })
        },
        err=>{
            console.log("pAll.then.err====>",err);
        }
    );


   /* //创建一个图片标签
    let img = document.createElement("img");
    img.src = "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=518705001,2876224431&fm=11&gp=0.jpg";
    img.onload = (e)=>{//加载成功后的回调函数
//        console.log("加载成功后的回调函数",e)


        setTimeout(()=>{

            let img1 = document.getElementById("img1");
        img1.src = "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=518705001,2876224431&fm=11&gp=0.jpg"
        },3000);


    };
    img.onerror = (e)=>{//加载失败后的回调函数
        console.log(e)
    };
    console.dir(img)*/

    {
        function requestImg(){
            var p = new Promise(function(resolve, reject){
                var img = new Image();
                img.onload = function(){
                    resolve(img);
                }
                img.src = 'xxxxxx';
            });
            return p;
        }

        //延时函数，用于给请求计时
        function timeout(){
            var p = new Promise(function(resolve, reject){
                setTimeout(function(){
                    reject('图片请求超时');
                }, 5000);
            });
            return p;
        }

        Promise.race([requestImg(), timeout()]).then(function(results){
            console.log(results);
        }).catch(function(reason){
            console.log(reason);
        });
        //上面代码 requestImg 函数异步请求一张图片，timeout 函数是一个延时 5 秒的异步操作。我们将它们一起放在 race 中赛跑。
        //如果 5 秒内图片请求成功那么便进入 then 方法，执行正常的流程。
        //如果 5 秒钟图片还未成功返回，那么则进入 catch，报“图片请求超时”的信息。
    }


</script>
</body>
</html>